<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Canvas draw Clock</title>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        FONT_HEIGHT = 15,
        MARGIN = 35,
        HAND_TRUNCATION = canvas.width / 25,
        HOUR_HAND_TRUNCATION = canvas.width / 10,
        NUMERAL_SPACING = 20,
        RADIUS = canvas.width / 2 - MARGIN,
        HAND_RADIUS = RADIUS + NUMERAL_SPACING;
    var loop;
    // 表盘
    function drawCircle() {
        context.beginPath();
        context.arc(canvas.width / 2, canvas.height / 2,
            RADIUS, 0, Math.PI * 2, true);
        context.lineWidth = 3; //线条的宽度
        context.strokeStyle = "#333"; //线条的颜色
        context.stroke();
    }
    // 数字
    function drawNumerals() {
        // 显示数字
        var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            angle = 0,
            numeralWidth = 0;
        numerals.forEach((numeral) => {
            angle = Math.PI / 6 * (numeral - 3);
            numeralWidth = context.measureText(numeral).width;
            context.fillText(numeral,
                canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth / 2,
                canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 3)
        })
    }
    // 圆心点
    function drawCenter() {
        context.beginPath();
        context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
        context.fill();
    }

    function drawHand(loc, isHour, size,color) {
        var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
            handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;

        context.moveTo(canvas.width / 2, canvas.height / 2);
        context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,
                       canvas.height / 2 + Math.sin(angle) * handRadius);
        context.lineWidth = size;
        context.strokeStyle = color;//线条的颜色
        context.stroke();
    }

    function drawHands() {
        var date = new Date,
            hour = date.getHours();

        hour = hour > 12 ? hour - 12 : hour;

        drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 4, "#333"); // 时针
        drawHand(date.getMinutes(), false, 3, "#333"); // 分针
        drawHand(date.getSeconds(), false, 2, "#333"); // 秒针
    }

    function drawClock() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawCircle();
        drawCenter();
        drawHands();
        drawNumerals();

    }
    context.font = FONT_HEIGHT + 'px Arial';
    loop = setInterval(drawClock, 1000);
    </script>
</body>

</html>
